<template>
  <div class="views-container">
    <div class="wlm-table">
      <!-- 工具条区域 -->
      <div class="wlm-table-hearder-btn">
        <router-link
          class="wlm-text"
          tag="span"
          :to="{ path: '/application/cardBagEdit' }"
        >
          <el-button size="small" type="primary">新增卡包</el-button>
        </router-link>
      </div>
      <!-- 工具条区域 end -->
      <!-- 表格区域 -->
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.cardBag.key"
          :default-sort="{ prop: 'sort', order: 'descending' }"
          :data="tableFormatData.cardBag.tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column prop="sort" width="80" label="排序" sortable>
            <template slot-scope="scope">
              <el-input-number
                @blur="
                  changeTableItem(
                    { card_id: scope.row.card_id, sort: scope.row.sort },
                    tableFormatData.cardBag.api.change.sort
                  )
                "
                style="width: 100%"
                size="mini"
                v-model="scope.row.sort"
                :controls="false"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="card_id" label="id" />
          <el-table-column prop="title" label="卡包名称" />
          <el-table-column prop="name" label="所属分类" />
          <el-table-column prop="type" label="次数类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">固定次数</span>
              <span v-else-if="scope.row.type == 2">任意次数</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="次数" />
          <el-table-column prop="unit_price" label="单价" />
          <el-table-column prop="is_show" label="是否展示到前端">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_show"
                :active-value="1"
                :inactive-value="2"
                @change="
                  changeTableItem(
                    { card_id: scope.row.card_id, is_show: scope.row.is_show },
                    tableFormatData.cardBag.api.change.is_show
                  )
                "
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <router-link
                class="wlm-text"
                tag="span"
                :to="{
                  path: '/application/cardBagEdit',
                  query: { card_id: scope.row.card_id },
                }"
              >
                <el-button type="primary" size="mini">编辑</el-button>
              </router-link>
              <el-button
                type="danger"
                size="mini"
                @click="delTableItem(scope.row.card_id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.cardBag.pagination.page"
            :page-sizes="tableFormatData.cardBag.pagination.pagesizes"
            :page-size.sync="tableFormatData.cardBag.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData ? tableFormatData.cardBag.pagination.total : 0"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表格区域 end -->
    </div>
  </div>
</template>

<script>
import { cardLists, cardDel, cardIsShow, cardEditSort } from "@/api/cardBag";
import mixins from "@/mixins/mixins";
export default {
  mixins: [mixins.getters("Table")],
  name: "cardLists",
  data() {
    return {
      tableFormatData: {
        current: "cardBag",
        cardBag: {
          key: "cardBag",
          api: {
            getList: cardLists, // 列表接口
            delList: cardDel,
            change: {
              sort: {
                key: "sort",
                api: cardEditSort,
              },
              is_show: {
                key: "is_show",
                api: cardIsShow,
              },
            },
          },
          tableData: [],
          files: {},
          rowId: "card_id",
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
    };
  },
  methods: {
    handleDelete(index, row) {
      // 删除
      console.log(index, row);
      this.$confirm("此操作将删除此行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          delSort({ sort_id: row.sort_id }).then((res) => {
            const { code } = res.data;
            code == 1 && this.$message.success("操作成功");
            this.$router.go(0);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped></style>
